<template>
  <span :style="{ '-webkit-line-clamp': rowsNum }" class="multiRow_2 vertical-middle" @mouseenter="visibility">
    {{ getText() }}
    <template v-if="tooltipFlag">
      <q-tooltip v-bind="$tooltipAttr">
        <slot name="tooltip"></slot>
        <template v-if="!slots.tooltip">{{ getText() }}</template>
      </q-tooltip>
    </template>
  </span>
</template>

<script setup>
import { ref, useSlots } from 'vue'
import { date } from 'quasar'
import { isEmpty } from 'src/utils/utils'

const props = defineProps({
  mask: String,
  rowsNum: { type: [Number, String], default: 1 },
  tooltipVisible: { type: Boolean, default: true },
  modelValue: [String, Number, Date, Array, Object]
})

const slots = useSlots()
const tooltipFlag = ref(true)

const formatText = (str = '') => props.mask ? date.formatDate(str, props.mask) : str
const getText = () => {
  if (!isEmpty(props.modelValue)) return formatText(props.modelValue)
  const slot = slots.default
  let text = ''
  if (slot && slot()) {
    for (const node of slot()) {
      text += node.children
    }
  }
  return formatText(text || '')
}

const visibility = (evt) => {
  if (!props.tooltipVisible) {
    tooltipFlag.value = false
    return
  }
  const selectWrap = evt.target || evt
  const boolean1 = selectWrap.scrollHeight > selectWrap.clientHeight + 2
  const boolean2 = selectWrap.scrollWidth > selectWrap.clientWidth
  if (boolean1 || boolean2) {
    tooltipFlag.value = true
    return
  }
  tooltipFlag.value = false
}

</script>